<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    int id=Integer.parseInt(request.getParameter("id"));
%>
<!DOCTYPE html>
<html lang="zh">

<head>
    <title>详细信息</title>
    <%@include file="../common/common.jsp"%>
</head>

<body>
<%@include file="../common/navBarTop.jsp"%>
<div class="container-fluid" >
    <div class="row" id="root">
        <div class="col-md-8 col-md-offset-2">
            <div class="row">
                <div class="col-md-8">
                    <div>
                        <h1 class="blog-title">{{datas.mainTitle}}</h1>
                        <p class="lead blog-description">{{datas.subTitle}}</p>
                    </div>
                    <div class="blog-post">
                        <h3 class="blog-post-title">介绍</h3>
                        <p class="blog-post-meta">{{datas.currDate}}</p>

                        <p>{{datas.synopsis}}</p>
                        <hr>
                        <img :src="'<%=path%>/'+datas.contentPicOne" style="width:100%;max-height: 300px;" alt="...">

                        <h3>{{datas.titleOne}}</h3>
                        <p>{{datas.titleOneDetail}}</p>
                        <hr>
                        <h3>{{datas.titleTwo}}</h3>
                        <p>{{datas.titleTwoDetail}}</p>
                        <img :src="'<%=path%>/'+datas.contentPicTwo" style="width:100%;max-height: 300px" alt="...">
                        <hr>
                        <h3>{{datas.titleThree}}</h3>
                        <p>{{datas.titleThreeDetail}}</p>
                        <hr>

                    </div>

                    <div class="blog-post">
                        <ul class="list-group">
                            <li class="list-group-item" v-for="(msg,index) in msgData">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="#">
                                            <img class="media-object" style="max-width: 64px;max-height: 64px;"
                                                 src="/assets/img/tx.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <div class="media-heading">
                                            {{msg.nick_name}}
                                        </div>
                                        {{msg.msg_content}}
                                        <hr class="d-hr">
                                        <div class="media-left">
                                        </div>
                                        <div class="media-body" v-if="msg.reply_msg !==null ">
                                            <h4 class="media-heading">管理员回复：</h4>
                                            {{msg.reply_msg}}
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="row" style="margin-top: 10px;">
                        <div class=" col-md-10">
                            <input type="text" class="form-control" v-model="message" placeholder="50字以内">
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-info" @click="sendMsg">留言</button>
                        </div>

                    </div>
                </div>
                <div class="col-md-4">
                    <div data-spy="affix" data-offset="90">
                        <img class="media-object" :src="'<%=path%>/'+datas.addressPic"
                             style="max-width: 300px;max-height: 300px;" alt="...">
                        <p>地址：{{datas.address}}</p>
                        <p>电话：{{datas.phone}}</p>
                        <p>星级：{{datas.star}}</p>
                        <p>附近酒店：{{datas.nearbyHotel}}</p>
                        <p>路线：{{datas.route}}</p>

                        <div>
                            <div class="pull-left"><p class="price">{{datas.price}}</p></div>
                            <div class="pull-right">
                                <a class="btn btn-success" @click="sendScenic(datas.id) "  target="_blank">订购</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <%@include file="../common/userLoginModal.jsp"%>
</div>
<%@include file="../common/navBarBottom.jsp"%>
</body>
<script type="text/javascript">
    // 应用路径
    const id = '<%=id%>';
    var app=new Vue({
        el: '#root',
        data() {
            return {
                datas: {
                    mainTitle:null
                },
                msgData:[],
                message:""
            }
        },
        methods:{
            async getData() {
                const { data: res }=  await axios.get(CONTEXT_PATH+'/ScenicSpot/load/'+id);
                this.datas = res;
            },
            //点击订阅
            async sendScenic(id){
                const { data: res }=  await axios.get(CONTEXT_PATH+'/ScenicSpot/insert/'+id);
                if(res.code===200){
                    swal("提示！","订购成功！","success")
                }
                if(res.code===401){
                    swal("提示！","请先登录！","warning");
                    $('#loginMoadl').modal('show');
                }
                if(res.code===402){
                    swal("提示！","已经订购！请勿重复订购！","warning")
                }
            },
            async getMsg(){
                const { data: res }=  await axios.get(CONTEXT_PATH+'/ScenicSpot/loadMsg/'+id);
                this.msgData = res.data;
            },
            async sendMsg(){
                var param={
                    message:this.message,
                    id:id
                };
                const { data: res }=  await axios.post(CONTEXT_PATH+'/ScenicSpot/insertMsg',param);
                if(res.code===200){
                    swal("提示！","留言成功！","success")
                }
                if(res.code===401){
                    swal("提示！","请先登录！","warning");
                    $('#loginMoadl').modal('show');
                }
                if(res.code===402){
                    swal("提示！",res.msg,"warning")
                }
            },
        },
        mounted:function(){
            this.getData();
            this.getMsg();
        }

    });
</script>
</html>
